<template>
  <div>
    <div class="header-btn">
      <div>{{ title }}</div>
      <div>
        <el-button type="primary" @click="submit">确认</el-button>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">险种设置</div>
      <el-form ref="insurance" :model="insurance" :rules="rules" label-width="120px" label-position="right"
        style="position: relative; margin-top: 16px">
        <el-form-item label="首图" required>
          <UploadMultiple :uploadList.sync="insurance.riskImgUrlList" :uploadRule="uploadRule" :isDisabled="isShow">
          </UploadMultiple>
        </el-form-item>
        <el-form-item label="名称" prop="riskName">
          <el-input v-show="!isShow" v-model="insurance.riskName" popper-class="minWidth-inp" style="width: 400px"
            placeholder="请输入">
          </el-input>
          <div v-show="isShow">{{ insurance.riskName }}</div>
        </el-form-item>
        <el-form-item label="分组" prop="categoryId">
          <el-select v-model="insurance.categoryId" clearable filterable placeholder="请选择分组" style="width: 400px"
            v-show="!isShow">
            <el-option v-for="item in groupOption" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
          <div v-show="isShow" v-for="item in groupOption" :key="item.id">
            <span v-if="item.id === insurance.categoryId">{{ item.name }}</span>
          </div>
        </el-form-item>
        <el-form-item label="险种链接" prop="riskLink">
          <el-input v-show="!isShow" v-model="insurance.riskLink" popper-class="minWidth-inp" style="width: 400px"
            placeholder="请输入">
          </el-input>
          <div v-show="isShow">{{ insurance.riskLink }}</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">分享设置</div>
      <el-form ref="share" :model="share" :rules="rules" label-width="120px" label-position="right"
        style="position: relative; margin-top: 16px">
        <el-form-item label="封面" required>
          <UploadMultiple :isDisabled="isShow" :uploadRule="singleRule" :uploadList.sync="share.coverUrl">
          </UploadMultiple>
          <div class="el-upload__tip">建议上传800*800像素的图片</div>
        </el-form-item>
        <el-form-item label="摘要" prop="content">
          <el-input type="textarea" :autosize="{ minRows: 2 }" placeholder="选填，页面描述会在微信转发中显示，帮助客户快速了解内容"
            v-model="share.content" v-show="!isShow" style="width: 640px" maxlength="640" show-word-limit>
          </el-input>
          <div v-show="isShow">{{ share.content }}</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { nameValidate, linkValidate } from "@/utils/validate";
import { categoryList } from "@/api/article/group";
import { UploadMultiple } from "@/components/index";
import {
  addRisk,
  detailRisk,
  editRisk,
} from "@/api/communityOperating/insurance";
export default {
  name: "addInsurance",
  components: {
    UploadMultiple,
  },
  data() {
    return {
      title: "",
      isShow: false,
      fileLoading1: false,
      fileLoading2: false,
      imageUrl: "",
      // 险种设置
      insurance: {
        riskImgUrlList: [], // 图片
        riskName: "", // 名称
        categoryId: "", // 分组
        riskLink: "", // 险种链接
        levelType: 2, // 固定值，区分媒体库
      },
      // 分享设置
      share: {
        coverUrl: "", // 封面
        content: "", // 摘要
      },
      groupOption: [],
      rules: {
        riskName: [
          { required: true, validator: nameValidate(""), trigger: "blur" },
        ],
        riskLink: [
          {
            required: true,
            validator: linkValidate("链接", 200),
            trigger: "blur",
          },
        ],
        categoryId: [
          { required: true, message: "请选择分组", trigger: "change" },
        ],
      },
      uploadRule: {
        maxLen: 1, // 控制多选几张
        sizeLen: 2, // 图片大小
        type: ["jpg", "png", "gif"],
        showClose: true, // 控制删除按钮
        multiple: false, // 是否多选
      },
      singleRule: {
        maxLen: 1, // 控制多选几张
        sizeLen: 2, // 图片大小
        type: ["jpg", "png", "gif"],
        showClose: true, // 控制删除按钮
        multiple: false, // 是否多选
      },
    };
  },
  mounted() {
    this.title = this.$route.query.operateFlag == 'ADD' ? "创建险种" : (this.$route.query.operateFlag == 'EDIT' ? "编辑险种" : "险种详情");
    this.isShow = this.$route.query.operateFlag == 'DETAIL'
    this.init();
  },
  methods: {
    // 初始化
    init() {
      // 获取分组
      categoryList({ levelType: 2, mediaType: 4}).then((res) => {
        if (res.code === 200) {
          this.groupOption = res.data;
        }
      });
      // 查看
      if (this.$route.query.riskId) {
        this.uploadRule.showClose = !this.isShow
        this.singleRule.showClose = !this.isShow
        detailRisk({ riskId: this.$route.query.riskId }).then((res) => {
          if (res.code === 200) {
            this.insurance.riskName = res.data.riskName;
            this.insurance.categoryId = res.data.categoryId;
            this.insurance.riskLink = res.data.riskLink;
            // this.insurance.riskImgUrlList = res.data.riskImgUrlList;
            this.share.content = res.data.content;
            // this.share.coverUrl = res.data.coverImgUrl;
            this.$nextTick(() => {
              this.insurance.riskImgUrlList = res.data.riskImgUrlList;
              this.share.coverUrl = res.data.coverImgUrl;
            });
          }
        });
      }
    },
    // 封面上传
    // submitUpload(url) {
    //   this.share.coverUrl = url;
    // },
    // 确认
    submit() {
      let obj = {
        ...this.insurance,
        ...this.share,
      };
      let valid1 = false;
      if (!this.insurance.riskImgUrlList.length) {
        this.$message.error("请上传首图！");
        return false;
      }
      this.$refs["insurance"].validate((valid) => {
        if (valid) {
          valid1 = true;
        }
      });
      if (!this.share.coverUrl) {
        this.$message.error("请上传封面！");
        return false;
      }
      if (valid1) {
        // 编辑
        if (this.$route.query.riskId) {
          obj.riskId = this.$route.query.riskId;
          editRisk(obj).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.data);
              this.goBack();
            }
          });
        } else {
          // 创建
          addRisk(obj).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.data);
              this.goBack();
            }
          });
        }
      }
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}
</style>
